<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=s, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text " v-model="name">
        {{name}}
        {{up}}
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                name:"生命周期",
                up:""
            },
            beforeCreate(){
                console.log('未绑定状态');
                console.log(this.name)
                console.log('--------------');
            },
            created(){
                console.log('已绑定数据，主要用来获取后端数据');
                console.log(this.name);
            },
            mounted(){
                console.log('实例数据渲染到视图层');
                console.log(
                    document.getElementsByTagName('p')
                );
            },
            beforeUpdate(){
                console.log('视图层发生变化前')
            },
            updated(){
                console.log('视图层发生变化后');
            },
            beforeDestroy(){
                console.log('实力销毁前');
            },
            destroyed(){
                console.log('实力销毁后');
            }
        })
    </script>
</body>
</html>